<template>
<div>
  <div>
    <h1>属性说明：</h1>
    <p>default-expand-all：写上默认为true，想要不展开，直接删除该属性，给false值无效</p>
    <p>border：是否带纵向边框</p>
  </div>
  <el-table
    class="table"
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children'}"
  >
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="url" label="地址" width="180"></el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column prop="icon" label="图标名称"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

</template>

<script>

export default {
  name: 'TreeList',
  data() {
    return {
      tableData: []
    }
  }
  ,created() {
    // 请求数据
    this.getData();
  }
  ,methods: {
    // 请求数据
    async getData(){
      let res = await this.$http.get("/menu/node");
      if(res.code === 1){
        this.tableData = res.data;
      }
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
    }
  }

}

</script>

<style lang="less">

</style>
